<template>
    <div class="two">
        <h3>根组件2</h3>
        <p>从 vue X 中获取值:{{ count  }}</p>
                <button @click="this.delCount">值 - 1</button>
                <button @click="changeCountAction(888)">1秒后改为888</button>
                <hr>
                <div> {{ filterList }} </div>
               <!-- 如果没有配置辅助函数 可以 使用{{$store.getters.filterList }}-->
                
                <!-- 测试访问模块中的state - 原生 -->
                <div>
                     {{ $store.state.user.userInfo.name }}
                </div>
                <div>{{ $store.state.setting.theme }}</div>
                <button @click="upData"> 更新个人信息 </button>
                <button @click="upDataColor"> 更新主题色 </button>
    </div>
</template>
<style>
.two{
    width: 300px;
    border:1px solid rgb(108, 107, 105);
    text-align: center;
    margin-left: 20px;
    margin-bottom: 20px;
}
</style>
<script>
import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';

export default {
       
    methods :{
         ...mapMutations(['delCount']),
         ...mapActions (['changeCountAction']),
        handleDel(){
            /* 没有使用mapMutations 时的调用 */
            /* this.$store.commit('delCount') */
            //使用mapMutations 时 的调用
            this.delCount()
        },
        //模块 mutation 的使用
        upData(){
            this.$store.commit('user/upDataMsg',{
                name:'xl',
                age:20
            })
        },
        upDataColor(){
            this.$store.commit('setting/upColor',{
                
            })
        }
    },
    computed:{
        ...mapState(['count','title']),
        ...mapGetters(['filterList'])
    }
}
</script>